<template>
  <div class="box">
    <div class="header">
      <div class="biao"><van-icon name="friends-o" size="25" /></div>
      <div class="sousuo"><van-search v-model="value" placeholder="请输入搜索关键词" /></div>
      <button @click="toLogin">登录</button>
    </div>
    <div class="main" @scroll="scrollMe" ref="main">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in bannerList" :key="item.id">
          <img :src="item.imgurl" />
        </van-swipe-item>
      </van-swipe>
      <!-- 页面分类区 -->
      <div class="top10">
        <van-grid :column-num="5">
          <van-grid-item
            v-for="item in navList"
            :key="item.navid"
            :icon="item.imgurl"
            :text="item.title"
          />
        </van-grid>
      </div>
      <!-- 海购秒杀区 -->
      <div class="miaosha">
        <div class="userBox">
          <div class="userCSS">嗨嗨秒杀购</div>
          <van-count-down :time="time">
            <template #default="timeData">
              <span class="block">{{ timeData.hours }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.minutes }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.seconds }}</span>
            </template>
          </van-count-down>
          <span class="userCSS">go~ 杀他></span>
        </div>
          <ul class="secKill">
            <li v-for="item in seckill" :key="item.proid" @click="jumpTo(item.proid)">
              <van-image width="60" height="60" :src="item.img1" />
              <p>￥{{ item.originprice }}</p>
            </li>
          </ul>
      </div>
      <!-- 商品浏览区 -->
      <div class="top10">
        <van-list
         v-model="loading"
         :finished="finished"
         finished-text="没有更多了"
         @load="onLoad"
        >
        <ul :class="isshow? 'prolist2':'prolist1' ">
          <li class="van-hairline--bottom van-hairline--right" v-for="item in prolist" :key="item.proid">
            <img :src="item.img1" alt="">
            <div> 
              <h4 class="van-multi-ellipsis--l2">{{item.proname}}</h4>
              <p>￥{{item.originprice}}</p>
            </div>
          </li>
          <!-- <li class="van-hairline--bottom">
            <img src="https://store.storeimages.cdn-apple.com/8756/as-images.apple.com/is/iphone14promax-digitalmat-gallery-1-202209?wid=364&hei=333&fmt=png-alpha&.v=1660830514664" alt="">
            <div> 
              <h4>骆晨虎我去，呀呀呀</h4>
              <p>$9999999</p>
            </div>
          </li> -->
          <div class="toCut" @click="isshow = !isshow">
            <van-icon name="bars" v-if="isshow" />
            <van-icon name="apps-o" v-else />
          </div>
        </ul>
      </van-list>
      <div class="top" v-if="scrollTop>700" @click="backTop">
        <van-icon name="back-top" />
      </div>
      </div>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
// import myHaiAxios from "../utils/request"; //海购的请求路径
// import myAxios from "../utils/mock"; //自己写的模拟数据
import {getBannerList,getNavList,getSeckillList,getProList} from "../api/home";
import Vue from "vue";
import {
  Search,
  Swipe,
  SwipeItem,
  Grid,
  GridItem,
  CountDown,
  Image as VanImage,
  Icon,
  List,
  PullRefresh,
} from "vant";

Vue.use(Search);
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(CountDown);
Vue.use(VanImage);
Vue.use(Icon);
Vue.use(List);
Vue.use(PullRefresh);

export default {
  name: "HomeView",
  components: {},
  data() {
    return {
      value:'',
      navList: [],
      bannerList: [],
      time: 24 * 60 * 60 * 1000,
      seckill: [],
      isshow: true,
      prolist: [],
      loading: false,
      finished: false,
      count: 2,
      isLoading:false,
      scrollTop: 0,
    };
  },
  methods: {
    onLoad(){
      this.loading = true;
      setTimeout(()=>{
        // 海购商品列表
        getProList({count:this.count,limitNum:12}).then(data => {
        // console.log(data.data.data);
        // this.prolist = data.data.data;
        this.loading = false;
        if (data.data.data.length==0) {
          this.finished = true;
        } else {
          this.prolist = [...this.prolist,...data.data.data];
          this.count++;
        }
        });
      },1500)
    },
    jumpTo(proid){
      this.$router.push("/detail/"+proid)
    },
    onRefresh(){
      setTimeout(() => {
        this.isLoading = false;
        getProList().then(data=>{
          this.prolist = data.data.data;
          this.count = 2;
        })
      }, 1000);
    },
    scrollMe(){
      this.scrollTop = this.$refs.main.scrollTop;
    },
    backTop(){
      this.$refs.main.scrollTop = 0;
    },
    toLogin(){
      this.$router.push("/login")
    }
  },
  created() {
    // 请求自己模拟的数据
    // 轮播图
    getBannerList().then((res) => {
      // console.log(res.data);
      this.bannerList = res.data;
    });
    // 页面分类区
    getNavList().then((res) => {
      // console.log(res.data);
      this.navList = res.data;
    });
    // 请求海购数据
    // 海购秒杀
    getSeckillList().then((res) => {
      // console.log(res.data.data);
      this.seckill = res.data.data;
    });
  },
};
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-evenly;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.my-swipe {
  height: 1.8rem;
}
.my-swipe img {
  height: 100%;
  width: 100%;
}
.miaosha {
  margin: 3px;
  border-radius: 5px;
  border: 1px solid black;
}
.top10 {
  margin-top: 3px;
  background-color: green;
}
.userBox {
  background-color: #39a9ed;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.userCSS {
  font-size: 16px;
  color: #ee0a24;
}
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
}
.secKill {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  overflow-y: auto;
}
.secKill > li > p {
  text-align: center;
  color: #ee0a24;
}
.prolist1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.prolist1 li {
  width: 48%;
}
.prolist1 li img {
  width: 100%;
}
.prolist2 li {
  display: flex;
}
.prolist2 li img {
  width: 30%;
  height: 40%;
}
.toCut {
  width: .3rem;
  height: .3rem;
  text-align: center;
  line-height: .3rem;
  border: 1px solid black;
  border-radius: 50%;
  position: fixed;
  bottom: .7rem;
  right: .2rem;
}
.top {
  width: .3rem;
  height: .3rem;
  text-align: center;
  line-height: .3rem;
  border: 1px solid black;
  border-radius: 50%;
  position: fixed;
  bottom: 1.1rem;
  right: .2rem;
}
</style>
